<template>
  <div class="container">
      <div class="header clearfix">
        <div class="query-box">
          <el-input v-model="input" style="width:230px" placeholder="请输入药品名称"></el-input>
          <el-button class="btn" @click="qureyProduct"><i class="el-icon-search"></i></el-button>
          <el-button @click="cancelQuery">取消</el-button>
        </div>
      </div>
      <div class="main-box">
        <el-table
          height="100%"
          :data="tableData"
          style="width: 100%"
          @expand-change="productDetails">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="产品ID：">
                  <span>{{ goodsInfo.id }}</span>
                </el-form-item>
                <el-form-item label="产品限度：">
                  <span>{{ goodsInfo.limit }}</span>
                </el-form-item>
                <el-form-item label="计量方式：">
                  <span>{{ goodsInfo.unit }}</span>
                </el-form-item>
                <el-form-item label="折扣：">
                  <span>{{ goodsInfo.discount }}</span>
                </el-form-item>
                <el-form-item label="产地：">
                  <span>{{ goodsInfo.place }}</span>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <span>{{ goodsInfo.created_at }}</span>
                </el-form-item>
                <el-form-item label="更改时间：">
                  <span>{{ goodsInfo.updated_at }}</span>
                </el-form-item>
                <el-form-item label="上架时间：">
                  <span>{{ goodsInfo.sale_stime }}</span>
                </el-form-item>
                <el-form-item label="下架时间：">
                  <span>{{ goodsInfo.sale_etime }}</span>
                </el-form-item>
                <el-form-item label="备注：">
                  <span>{{ props.row.remark }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="price"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="pure_price"
            label="净价">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="brand"
            label="品牌">
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 'new'">新增</span>
              <span v-else-if="scope.row.state === 'sales'">销售中</span>
              <span v-else>下架</span>
            </template>
          </el-table-column>
          <el-table-column width="250" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button
                v-show="scope.row.state === 'new'"
                size="mini"
                type="info"
                @click="ok(scope.$index, scope.row)">审核</el-button>
            </template>
          </el-table-column>  
        </el-table>
      </div>

      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    
  </div>
</template>

<script>
    import { deleteProductApi, okProductApi, productInfoApi, productListApi } from '../../../apis/productApi'
    export default {
      data() {
        return {
          input: '',
          page: 1,
          size: 10,
          tableData: [],
          count: 0,
          show: false,
          goodsInfo:{},
          open:false
        }
      },
      created(){
        let params = {page: this.page,size: this.size}
        this.getProductList(params)
      },
      methods: {
        ok(index,row){
          let data = {
            "goods_id": row.id,
            "user_id": this.$store.getters['common/userInfo'].id,
            "user_name": this.$store.getters['common/userInfo'].name,
            "state": 1,
            "remark": "备注"
          }
          okProductApi(data).then(res => {
            if(res.code === 200){
              this.$message.success('产品审核成功')
              this.getProductList()
            }else{
              this.$message.error('审核失败')
            }
          })
        },
        // 产品详情
        productDetails(data){
            this.open = !this.open
            if(this.open){
              this.goodsInfo = {}
              productInfoApi({id: data.id}).then(res => {
                console.log(res);
                if(res.code === 200){
                  this.goodsInfo = res.data
                }
              })
            }
        },
        // 获取产品列表
        getProductList(params){
          productListApi(params).then(res => {
            if(res.code === 200){
              this.tableData = res.data.rows
              this.count = res.data.count
            }
          })
        },
        // 改变每页展示条数
        handleSizeChange(val){
          this.size = val
          productListApi({page: this.page,size: this.size}).then(res => {
            if(res.code === 200){
              this.tableData = res.data.rows
              this.count = res.data.count
            }
          })
        },
        // 改变当前页
        handleCurrentChange(val){
          this.page = val
          productListApi({page: this.page,size: this.size}).then(res => {
            if(res.code === 200){
              this.tableData = res.data.rows
              this.count = res.data.count
            }
          })
        },
        // 产品查询
        qureyProduct(){
          productListApi({page: this.page,size: this.size,name: this.input}).then(res => {
            if(res.code === 200){
              this.tableData = res.data.rows
              this.count = res.data.count
            }
          })
        },
        // 取消查询
        cancelQuery(){
          productListApi({page: this.page,size: this.size}).then(res => {
            if(res.code === 200){
              this.tableData = res.data.rows
              this.count = res.data.count
              this.input = ''
            }
          })
        },
        handleEdit($index,row){
          this.show = true
          // this.$router.push({ path: '/sys/product/edit', query: { plan: row }})    
          this.$router.push('/sys/product/edit')    
          localStorage.setItem('product',JSON.stringify(row))
        },
        handleDelete($index,row){
          console.log(row.id);
          deleteProductApi(row.id).then(res => {
            if(res.code === 200){
              this.$message.success('产品删除成功')
              this.getProductList()
            }else{
              this.$message.error('产品删除失败')
            }
          })
        }
      }
    }
  </script>

<style lang="less" scoped>
  .clearfix::after{
    display: block;
    clear: both;
    content: '';
    height: 0;
  }
  .container{
    padding: 0px 16px;
    width: 100%;
    height: 100%;
    position: relative;
    > .header{
      width: calc(100% - 32px - 10px);
      height: 40px;
      padding: 7px 10px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      .query-box{
        height: 36px;
        float: right;
        display: flex;
        align-items: center;
        background-color: #ddd;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        .el-input ::v-deep{
          border: 0 solid #000;
          .el-input__inner{
            height: 36px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
        .btn{
            width: 20px;
            text-align: center;
          }
        .el-button{
          border: 0 solid #000;
          background-color: rgba(0, 0, 0, 0);
          margin-left: 0;
        }
      }
    }
    
    > .main-box{
      width: calc(100% - 32px);
      height: calc(100% - 57px - 50px - 40px);
      > .el-table ::v-deep{
        th{
          color: #333;
          text-align: center;
          background-color: rgb(239, 243, 246);
        }
        td{
          font-size: 0.8rem;
          text-align: center;
        }
      }
    }
    > .footer{
      height: 40px;
      width: calc(100% - 32px);
    }
  }

    .demo-table-expand .el-form-item {
      margin-left: 0;
      margin-bottom: 0;
      width: 100%;
      text-align: left;
      margin-left: 16px;
  }

</style>